import React, { Component } from 'react';
import {BrowserRouter,Switch,Route, Redirect} from 'react-router-dom'
import { CSSTransition, TransitionGroup } from 'react-transition-group';
import Common from './Common';
//导入路由配置信息
import Routes from './RouterConfig';
class index extends Component {
    render() {
        return (
            <div>
                <BrowserRouter>
                    <Route children={(props)=>{
                        // console.log(props);
                        let {history,location} = props;
                        return(
                            <TransitionGroup>
                                <CSSTransition  timeout={0}>
                                    <Switch location={location}>
                                        {Routes.map((route,index)=>{
                                            return this.createChildrenRoute(route,index)
                                        })}
                                    </Switch>
                            </CSSTransition>
                            </TransitionGroup>
                        )
                    }}>

                    </Route>
                </BrowserRouter>
            </div>
        );
    }
    //定义函数完成普通路由的构建
    createBaseRoute(route,index){
        
        return <Route exact path={route.path} render={(props)=>{
                return (
                    <Common meta={route.meta} {...props}>
                        <route.component {...props}></route.component>
                    </Common>
                )
        }}  key={index}></Route>
    }
    //定义函数 完成子路由的构建
    createChildrenRoute(route,index){
        //获取当前路由的相关信息
        let {path,component:Father,children} = route
        if(children){
            return <Route key={index} path={path} children={()=>{
                return (
                    <Father>
                        <Switch>
                            {
                                children.map((route2,index2)=>{
                                    return this.createChildrenRoute({...route2,path:path+'/'+route2.path},`${index}-${index2}`)
                                })
                            }
                            <Redirect from={path} to={path+'/'+children[0].path}></Redirect>
                        </Switch>
                    </Father>
                )
            }} />
        }else{
            //生成普通路由实例
            return this.createBaseRoute(route,index)
        }
    }
}

export default index;